import React from 'react'
import { Table } from 'antd'
import type { ColumnsType } from 'antd/es/table';
/**
 * columns 表格列信息
 * dataSource 表格的数据源 [{},{}]
 */
interface ITodo {
    id: number;
    title: string;
    isDone: boolean;
}
type ITodos = ITodo[]
export default function TableTest() {
    const columns: ColumnsType<ITodo> = [
        {
            title: 'id',// 指定列名
            dataIndex: 'id' // 数据源的属性名
        },
        {
            title: '待办事项',
            dataIndex: 'title'
        },
        {
            title: '是否完成',
            dataIndex: 'isDone',
            // 自定义渲染内容
            render(value: any, row: ITodo, index: number) {
                // 如果有dataIndex的配置，那么value取的就是dataIndex指定的属性值
                // 如果乜有dataIndex配置，那么value的值就是当前遍历的行对象，跟第二个参数row一样
                console.log('value: ', value);
                console.log('row: ', row);// 当前遍历对象
                console.log('index: ', index);// 索引

                return value ? '已完成' : '未完成'
            }
        }
    ]

    const dataSource: ITodos = [
        {
            id: 1,
            title: '吃饭',
            isDone: true
        },
        {
            id: 2,
            title: '睡觉',
            isDone: true
        },
        {
            id: 3,
            title: '打豆豆',
            isDone: false
        }

    ]
    return (
        <div>
            <Table
                rowKey={'id'} // key={todo.id}
                columns={columns}
                dataSource={dataSource}
            />
        </div>
    )
}
